import { useState } from 'react';
import type { FormProps } from 'antd';
import { Button, Form, Input, Modal, message } from 'antd';
// 引入登录
import { get_login} from '@/utils/index'
// 右侧登录标签
import register from '../../public/register.webp'
// 版权徽标
import CopyrightLogo from '../../public/Copyrightlogo.png'
// hot徽标
import hotLogo from '../../public/tiphot.svg'
import loginImg from '../../public/login.webp'
import btn1 from '../../public/btn1.png'
import btn2 from '../../public/btn2.png'
import er from '../../public/er.png'
import erwei from '../../public/erwei.png'
import register_replace from '../../public/QQ截图.png'


function HeaderIndex() {
  // 通过useState定义变量
  const [open, setOpen] = useState(false)
  const headerHover = () => {
    setOpen(true)
  }
  const headerLeave = () => {
    setOpen(false)
  }
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [messageApi, contextHolder] = message.useMessage();
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  // 登录
  type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
  };

  const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
    console.log('Success:', values);
    let { data } = await get_login(values)
    console.log(data, 'res');
    if (data.code === 200) {
      messageApi.open({
        type: 'success',
        content: '登录成功',
      });
      setIsModalOpen(false);
      localStorage.setItem('token', JSON.stringify(data.token))
      localStorage.setItem('userId', JSON.stringify(data.userId))
    }
  };

  const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  // 扫码登录
  const [activeTab, setActiveTab] = useState<string>('wechat'); // 初始值为微信扫码登录
  const [cut, setCut] = useState(true)
  const handleTabChange = (tab: string) => {
    setActiveTab(tab);
  };
  return (
    <div className='headerBox'>
      {contextHolder}
      <div style={{ float: 'left' }}>
        <div className='headerBox_left'>
          <div>
            <a style={{ display: 'flex', textAlign: 'center', float: 'left' }}
              href='http://localhost:5175/' onMouseOver={headerHover} onMouseLeave={headerLeave} >
              <img style={{ width: '140px', height: '30px', marginTop: '15px' }} src="../../../public/logo.png" alt="" />
            </a>
            {
              open ? <>
                <img src="../../../public/logoJian.png" width={73.2} alt="" />
                <div className='BookmarkBar'>
                  拖动logo到书签栏,快速收藏方便制作
                </div>
              </> : ''
            }
          </div>
        </div>
        <ul className='headerBox_center' >
          <li style={{ position: 'relative' }}><b>免费模板</b>
            <img src={hotLogo} style={{ position: 'absolute', top: '12px', left: '40px' }} alt="" /> </li>
          <li style={{ position: 'relative' }}>开通会员
            <img src={CopyrightLogo} width={50} style={{ position: 'absolute', top: '8px', left: '20px' }} alt="" />
          </li>
          <li>产品服务</li>
          <li>解决方案</li>
          <li>内容中台</li>
          <li>资源与合作</li>
        </ul>
      </div>
      <div className="headerBox_right">
        <div className="headerBox_right_login" onClick={showModal}>
          登录/注册
        </div>
        <Modal width="800px" closable={false} footer={null} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
          <div className='loginBox'>
            <div className="loginBox_left">
              <img src={loginImg} alt="" />
            </div>
            <div className="loginBox_right" style={{ display: cut ? 'none' : 'block' }}>
              <div className='switchImages' onClick={() => { setCut(!cut) }} ><p>微信扫码登录</p> <img width={60} height={60} src={btn1} alt="" /> </div>
              <div className='scanCode'>
                <h2>手机密码登录</h2>
                <Form
                  name="basic"
                  style={{ maxWidth: 600 }}
                  initialValues={{ remember: true }}
                  onFinish={onFinish}
                  onFinishFailed={onFinishFailed}
                  autoComplete="off"
                >
                  <Form.Item<FieldType>
                    name="username"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                  >
                    <Input placeholder='请输入账号' style={{ width: '370px', height: '40px' }} />
                  </Form.Item>

                  <Form.Item<FieldType>
                    name="password"
                    rules={[{ required: true, message: 'Please input your password!' }]}
                  >
                    <Input.Password placeholder='请输入密码' style={{ width: '370px', height: '40px' }} />
                  </Form.Item>
                  <Form.Item >
                    <Button type="primary" htmlType="submit" className='wide-button'>
                      登录
                    </Button>
                    <div className='verification'>
                      <p className='verification_account'>
                        手机验证码登录
                      </p>
                      <p className='verification_password'>忘记密码</p>
                    </div>
                  </Form.Item>
                </Form>
              </div>
              <div className='loginBox_right_QQ'>
                <img width={'80%'} src={register_replace} alt="" />
              </div>
            </div>
            <div className="loginBox_right_replace" style={{ display: !cut ? 'none' : 'block' }}>
              <div className='switchImages' onClick={() => { setCut(!cut) }} ><p>手机号登录</p> <img width={60} height={60} src={btn2} alt="" /> </div>
              <div className='scanCode'>
                <div className='tabHeader'>
                  <p onClick={() => handleTabChange('wechat')} className={activeTab === 'wechat' ? 'active' : ''}>微信扫码登录</p>
                  <p onClick={() => handleTabChange('app')} className={activeTab === 'app' ? 'active' : ''}>易企秀app扫码登录</p>
                </div>
                <div className='tabContent'>
                  {activeTab === 'wechat' &&
                    <div>
                      <div>微信扫码登录内容 </div>
                      <img src={er} alt="" />
                    </div>
                  }
                  {activeTab === 'app' &&
                    <div>
                      <div>易企秀app扫码登录内容 </div>
                      <img src={erwei} alt="" />
                    </div>
                  }
                </div>
              </div>
              <div className='loginBox_right_QQ'>
                <img width={'80%'} src={register_replace} alt="" />
              </div>
            </div>
          </div>
        </Modal>
        <img src={register} alt="" className='headerBox_right_register' />
      </div>
    </div>
  )
}
export default HeaderIndex
